<template>
  <div class="bigbox_home">
    <homeHeader></homeHeader>
    <homeSwiper :imgList="imgList"></homeSwiper>
    <homeCaidan :CaidanList="CaidanList"></homeCaidan>
    <homelibiao :liebiaoList="liebiaoList"></homelibiao>
    <homeguanggao :guanggaoList="guanggaoList"></homeguanggao>
  </div>
</template>
<script>
import homeHeader from "./components/header";
// 轮播
import homeSwiper from "./components/Swiper";
// 子菜单
import homeCaidan from "./components/Caidan";
// 列表项
import homelibiao from "./components/liebiao";
// 广告
import homeguanggao from "./components/guanggao";
// 发送axios
import axios from "axios";
// 获取现在的点击城市，为下面的数据更换
import { mapState } from "vuex";

export default {
  name: "home",
  components: {
    homeHeader,
    homeSwiper,
    homeCaidan,
    homelibiao,
    homeguanggao
  },
  // 开始请求数据,父组件传给子组件属性去传值。
  data() {
    return {
      // city:'',//这是城市
      imgList: [], //因为轮播是放入很多的对象，所以使用数组
      CaidanList: [], //菜单的data数据
      liebiaoList: [], //这是公共列表的数据
      guanggaoList: [], //这是广告的数据
      cityCity: "" //先默认选中的城市
    };
  },
  // 计算属性,为下面的数据更换
  // 意思：我从city映射到这个组件中，名字叫city
  computed: {
    ...mapState(["city"])
  },
  // 点击事件
  methods: {
    getHomeInfo() {
      // 获取get请求的方法 url，axops返回的是一个prop对象，所以这里用then
      // axios.get('/api/index.json')
      // 当你更换城市的时候，你的数据应该也是要更换的，所以你的数据应该带一个参数过去,this.city需要从store中获取到所以需要借助vuex
      axios.get("/api/index.json?city" + this.city).then(this.getHomeInfoSucc);
    },
    getHomeInfoSucc(res) {
      console.log(res);
      // 对接接口
      res = res.data;
      // 判断若是res.ret就是后天若是返回有data数据
      if (res.ret && res.data) {
        // 这是请求头部的header的城市,res.data.city这是看后台返给你的数据结构
        // this.city=res.data.city
        //  请求swiper轮播的数据请求
        this.imgList = res.data.imgList;
        // 请求菜单的数据
        this.CaidanList = res.data.CaidanList;
        //  请求列表的数据
        this.liebiaoList = res.data.liebiaoList;
        // 请求广告的数据
        this.guanggaoList = res.data.guanggaoList;
      }
    }
  },
  // 渲染挂在完成时候，执行一个函数，但是函数应该定义在methods这个方法里面
  mounted() {
    this.cityCity = this.city;
    this.getHomeInfo();
  },
  // activated是当页面重新显示，才被重新执行。
  activated() {
    // 若是跳转回来的城市跟默认城市不同，则重新请求数据。比如开始城市是三亚，选中河南之后，你所有数据应该都是换成河南的。
    if (this.cityCity !== this.city) {
      this.cityCity = this.city;
    //   重新请求数据。记得是this.xxx并不是直接函数名就行。
      this.getHomeInfo();
    }
  }
};
</script>>  

<style scoped>
</style>